<script setup>
import { computed, ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { route } from 'uview-plus'
import { getCategoryListApi } from '@/apis/category'
import { useCartStore } from '@/store'
const current = ref(0)
const categoryList = ref([])
const getCategoryList = async () => {
	const res = await getCategoryListApi()
	categoryList.value = res.data.data
}


const onClickLevel3Item = (item) => {
	route({
		url: '/pages/goods/search',
		params: {
			categoryId: item.id
		}
	})
}

const cartStore = useCartStore()
const token = uni.getStorageSync('token')
onShow(() => {
	getCategoryList()

	if (token) {
		cartStore.getCount()
	}
})


// 改变
const swichMenu = (index) => {
	current.value = index
}

 

</script>
<template>
	<view class="page">
		<!-- 导航栏 -->
		<view class="nav-box" >
			<up-navbar leftIcon="" :placeholder="true" :height="50" bgColor="#fff" >
				<template #center>
					<up-search  :showAction="false" :disabled="true" @click="route({url: '/pages/goods/search', type: 'to'})"   class="search-box" placeholder="搜索"></up-search>
				</template>
			</up-navbar>
		</view>

		<view class="u-menu-wrap">
			<!-- 左侧菜单 -->
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view"  >
				<view v-for="(item, index) in categoryList" :key="index" class="u-tab-item"
					:class="[current == index ? 'u-tab-item-active' : '']" :data-current="index" @tap.stop="swichMenu(index)">
					<text class="u-line-1">{{ item.categoryName }}</text>
				</view>
			</scroll-view>
			<!-- 右侧菜单 -->
			<block v-for="(item1, index1) in categoryList" :key="index1">
				<scroll-view scroll-y class="right-box" v-if="current == index1" style="height: calc(100vh - 100px);">
					<view class="page-view" v-for="item2 in item1.children" :key="item2.id">
						<view class="class-item" v-if="item2.children && item2.children.length > 0">
							<view class="item-title">
								<text>{{ item2.categoryName }}</text>
							</view>
							<view class="item-container">
								<view class="thumb-box" v-for="(subItem, subIndex) in item2.children" :key="subIndex" @click="onClickLevel3Item(subItem)">
									<image class="item-menu-image" :src="subItem.icon" mode=""></image>
									<view class="item-menu-name">{{ subItem.categoryName }}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</block>
		</view>
	</view>
</template>

<style scoped lang="scss">
.page {


	.nav-box {
		.search-box {
			padding: .2rem 1rem .2rem;
			border-bottom: 1px solid #F9F9F9;
		}
	}

	// 菜单
	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;

		.u-tab-view {
			height: 100%;

		}

		.u-tab-view {
			width: 200rpx;
			height: 100%;



			.u-tab-item {
				height: 110rpx;
				background: #f6f6f6;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #444;
				font-weight: 400;
				line-height: 1;
			}

			.u-tab-item-active {
				position: relative;
				color: #000;
				font-size: 30rpx;
				font-weight: 600;
				background: #fff;
			}

			.u-tab-item-active::before {
				content: "";
				position: absolute;
				border-left: 4px solid $u-primary;
				height: 32rpx;
				left: 0;
				top: 39rpx;
			}

		}
	}

	// 左侧
	.right-box {

		background-color: rgb(250, 250, 250);

		.page-view {
			padding: 16rpx;

			.class-item {
				margin-bottom: 30rpx;
				background-color: #fff;
				padding: 16rpx;
				border-radius: 8rpx;

				.item-title {
					font-size: 26rpx;
					color: $u-main-color;
					font-weight: bold;
				}

				.item-container {
					display: flex;
					flex-wrap: wrap;

					.thumb-box {
						width: 33.333333%;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						margin-top: 20rpx;

						.item-menu-name {
							font-weight: normal;
							font-size: 24rpx;
							color: $u-main-color;
						}

						.item-menu-image {
							width: 60rpx;
							height: 60rpx;
						}
					}
				}
			}
		}
	}
}
</style>